<template>
  <div class="main-content-wrapper">
    <a-row :gutter="24">

      <a-col :span="6">
        <div class="filters-panel">

          <a-radio-group v-model:value="filterScope" button-style="solid" style="margin-bottom: 16px;">
            <a-radio-button value="collected">我的收藏</a-radio-button>
            <a-radio-button value="all">所有</a-radio-button>
          </a-radio-group>

          <h2 class="filter-title0">过滤器</h2>
          <a-divider />

          <h3 class="filter-title">质量门禁</h3>
          <a-menu mode="inline" :selectable="false" class="filter-menu">
            <a-menu-item key="t_normal">
              <span class="icon-right">✓</span> 正常 <span class="count">0</span>
            </a-menu-item>
            <a-menu-item key="t_error">
              <span class="icon-danger">×</span> 错误 <span class="count">0</span>
            </a-menu-item>
          </a-menu>

          <a-divider />

          <h3 class="filter-title">安全性</h3>
          <a-menu mode="inline" :selectable="false" class="filter-menu">
            <a-menu-item v-for="level in severityLevels" :key="level.key">
              <span :class="['icon-level', level.key]">★</span>
              {{ level.label }} <span class="count">{{ level.count }}</span>
            </a-menu-item>
          </a-menu>

          <h3 class="filter-title">可靠性</h3>
          <a-menu mode="inline" :selectable="false" class="filter-menu">
            <a-menu-item v-for="level in severityLevels" :key="level.key">
              <span :class="['icon-level', level.key]">★</span>
              {{ level.label }} <span class="count">{{ level.count }}</span>
            </a-menu-item>
          </a-menu>

          <a-divider />

          <div class="filter-actions">
            <a-space size="small">
              <a-flex >
                <a-input autofocus placeholder="搜索语言" /><a-button type="primary">搜索</a-button>
              </a-flex>
              <a-flex >
                <a-input autofocus placeholder="标签" /><a-button type="primary">搜索</a-button>
              </a-flex>
            </a-space>
          </div>

        </div>
      </a-col>

      <a-col :span="18">
        <div class="list-panel">
          <div class="list-header">
            <a-input-search
                v-model:value="searchText"
                placeholder="Q 搜索规则 (Minimum 2 characters)"
                style="width: 300px; margin-right: 16px;"
                allow-clear
            />

            <span class="filter-title1">透视图</span>
            <a-select v-model:value="selectedStatus" placeholder="状态选择" style="width: 120px; margin-right: 8px;">
              <a-select-option value="active">启用</a-select-option>
              <a-select-option value="inactive">禁用</a-select-option>
            </a-select>

            <span class="filter-title1">排序</span>
            <a-select v-model:value="selectedScope" placeholder="缺陷范围" style="width: 120px;">
              <a-select-option value="private">私有</a-select-option>
              <a-select-option value="public">公共</a-select-option>
            </a-select>

            <a-button type="link" style="margin-left: 8px;">
              <template #icon><SortAscendingOutlined /></template>
            </a-button>
          </div>

          <a-row class="project-line" >
            <a-button type="link" style="margin-left: 8px;">
              <HeartOutlined />
            </a-button>
            <span class="project-item">project项目</span>
            <a-divider />
            <span class="empty-list-content">
                尚未找到规则，<a href="#">配置新增规则</a>
              </span>
          </a-row>

          <a-row class="project-line">
            <a-button type="link" style="margin-left: 8px;">
              <HeartOutlined />
            </a-button>
            <span class="project-item">project项目</span>
            <a-divider />
            <span class="empty-list-content">
                尚未找到规则，<a href="#">配置新增规则</a>
              </span>
          </a-row>

          <!--          <a-tabs v-model:activeKey="activeTabKey" class="content-tabs">-->
          <!--            <a-tab-pane key="project" tab="project">-->
          <!--              <div class="tab-content-container">-->
          <!--                <div class="empty-list-content">-->
          <!--                  尚未找到规则，<a href="#">配置新增规则</a>-->
          <!--                </div>-->
          <!--              </div>-->
          <!--            </a-tab-pane>-->
          <!--            <a-tab-pane key="group" tab="项目">内容为空</a-tab-pane>-->
          <!--            <a-tab-pane key="public" tab="公共">内容为空</a-tab-pane>-->
          <!--          </a-tabs>-->

          <div class="pagination-info">
            显示 1 项中的 1 项
          </div>

        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';

// 左侧筛选器数据
const filterScope = ref('all');
const searchText = ref('');

// 缺陷类型勾选状态
const checkedTypes = reactive({
  normal: true,
  error: true,
  warn: false,
  info: false,
});

// 严重性等级数据
const severityLevels = [
  { key: 'a_0', label: 'A ≥ 0 提示问题', count: '0', color: 'green' },
  { key: 'a_1', label: 'B ≥ 1 低级问题', count: '0', color: 'blue' },
  { key: 'a_2', label: 'C ≥ 2 中级问题', count: '0', color: 'yellow' },
  { key: 'a_3', label: 'D ≥ 3 高级问题', count: '0', color: 'orange' },
  { key: 'a_4', label: 'E ≥ 4 阻断问题', count: '0', color: 'red' },
];
// 严重性勾选状态
const checkedSeverity = reactive({});
severityLevels.forEach(level => {
  checkedSeverity[level.key] = ref(false);
});


// 右侧控制数据
const selectedStatus = ref(undefined);
const selectedScope = ref(undefined);
const activeTabKey = ref('project');

</script>

<style scoped>
.project-line{
  background-color: #F0FFFF;
  margin-bottom: 8px;
}
.project-item{
  font-size: 16px;
  font-weight: bold;
  color: rgba(30, 144, 255, 0.8);
  margin-top: 6px;
}
.filter-title0 {
  font-size: 18px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.88);
  margin-top: 16px;
  margin-bottom: 8px;
}
.filter-title1 {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.70);
  margin-right: 8px;
}
/* 整个内容区的容器 */
.main-content-wrapper {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 48px);
}

/* --- 左侧筛选器面板样式 --- */
.filters-panel {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
}
.filter-title {
  font-size: 14px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.88);
  margin-top: 16px;
  margin-bottom: 8px;
}
.filter-menu {
  border-right: none;
}
.filter-menu :deep(.ant-menu-item) {
  padding-left: 0 !important;
  height: 32px;
  line-height: 32px;
  display: flex;
  align-items: center;
}
.filter-menu :deep(.ant-menu-item .ant-checkbox-wrapper) {
  margin-right: 8px;
}
.filter-menu .count {
  margin-left: auto;
  color: rgba(0, 0, 0, 0.45);
}

/* 筛选器中的图标颜色 */
.icon-right { color: #39c710; font-weight: bold; margin-right: 4px; }
.icon-danger { color: #ff4d4f; font-weight: bold; margin-right: 4px; }
.icon-level { margin-right: 4px; }
.icon-level.a_0 { color: #52c41a; }
.icon-level.a_1 { color: #1890ff; }
.icon-level.a_2 { color: #ffff00; }
.icon-level.a_3 { color: #faad14; }
.icon-level.a_4 { color: #ff4d4f; }

.filter-actions {
  padding-top: 16px;
  text-align: right;
}

/* --- 右侧列表面板样式 --- */
.list-panel {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
}

.list-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.result-count {
  margin-left: 8px; /* 紧跟在下拉框后面 */
  color: rgba(0, 0, 0, 0.65);
  background: #fff;
  border-color: #d9d9d9;
}
.result-count:first-of-type {
  margin-left: auto; /* 推到右边 */
}

/* Tab内容区域 */
.content-tabs {
  /* 移除Tabs默认的边距，让内容更贴近顶部 */
  margin-bottom: 0;
}

.tab-content-container {
  background: #fff;
  min-height: 300px; /* 确保空内容时有一个高度 */
}

.empty-list-content {
  text-align: center;
  padding: 40px;
  color: rgba(0, 0, 0, 0.45);
}

.pagination-info {
  text-align: right;
  margin-top: 16px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}
</style>